<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div ref="params" class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item label="最后操作时间:">
						<el-date-picker
							v-model="searchTime"
							size="medium"
							:picker-options="pickerOptions"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:clearable="false"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="支付方式:">
						<el-select
							v-model="queryData.payType"
							placeholder="全部"
							clearable
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in enumPaymentDepositType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							查询
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							重置
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					class="small-size-table"
					:data="tableData"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="sort"
						align="center"
						label="排序"
					></el-table-column>
					<el-table-column
						prop="payName"
						align="center"
						label="支付方式"
					></el-table-column>
					<el-table-column prop="status" align="center" label="状态">
						<template slot-scope="scope">
							<el-switch
								v-if="hasPermission('779')"
								v-model="scope.row.status"
								:active-value="0"
								:inactive-value="1"
								@change="handleSwitch($event, scope.row)"
							></el-switch>
						</template>
					</el-table-column>
					<el-table-column
						prop="creditLevel"
						align="center"
						label="对应信用等级"
					></el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						label="最后操作时间"
					></el-table-column>
					<el-table-column
						prop="operator"
						align="center"
						label="操作人"
					></el-table-column>
					<el-table-column
						prop="operating"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('778')"
								type="primary"
								icon="el-icon-edit"
								:disabled="loading"
								size="medium"
								@click="edit(scope.row)"
							>
								编辑
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog
				:title="title"
				:visible.sync="dialogFormVisible"
				:destroy-on-close="true"
				width="520px"
				class="rempadding"
				@close="clear"
			>
				<el-divider></el-divider>
				<el-form
					ref="formSub"
					:model="dialogForm"
					label-width="120px"
					:rules="rules"
				>
					<el-form-item label="排序:" prop="sort">
						<el-input-number
							v-model="dialogForm.sort"
							:min="0"
							:placeholder="$t('common.please_enter')"
							clearable
							style="width:210px"
							:controls="false"
						></el-input-number>
					</el-form-item>
					<el-form-item label="对应信用等级:" prop="creditLevel">
						<el-select
							v-model="dialogForm.creditLevel"
							multiple
							collapse-tags
							:placeholder="$t('common.please_choose')"
							style="width:210px"
						>
							<el-option
								v-for="item in creditLevelList"
								:key="item.creditLevel"
								:label="item.creditLevel"
								:value="item.creditLevel + ''"
							></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">
						取消
					</el-button>
					<el-button type="primary" @click="subAddOrEdit">
						保存
					</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
export default {
	name: routerNames.createRiskRank,
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			queryData: {
				payType: undefined
			},
			searchTime: undefined,
			tableData: [],
			dialogFormVisible: false,
			creditLevelList: [], // 信用等级
			dialogForm: {
				sort: undefined,
				creditLevel: []
			},
			title: ''
		}
	},
	computed: {
		enumPaymentDepositType() {
			return this.globalDics.enumPaymentDepositType || []
		},
		rules() {
			return {
				sort: [{ required: true, message: '请输入', trigger: 'blur' }],
				creditLevel: [
					{ required: true, message: '请选择', trigger: 'blur' }
				]
			}
		}
	},
	created() {
		this.initCreditLevelList()
	},
	methods: {
		initCreditLevelList() {
			this.$api
				.getCreditLevelConfcreditList({ creditType: 1 })
				.then((res) => {
					if (res.code === 200) {
						this.creditLevelList = res.data
					}
				})
		},
		loadData() {
			this.loading = true
			const create = this.searchTime || []
			const [startTime, endTime] = create
			const params = {
				...this.queryData,
				userType: 0,
				startAt: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endAt: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			this.$api
				.getCreditLevelConfQuery(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.tableData = res.data
						this.total = res.totalRecord || 0
					}
				})
				.catch((err) => {
					this.loading = false
					this.$message.error(err)
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {
				payType: undefined
			}
			this.searchTime = undefined
			this.loadData()
		},
		handleSwitch(val, row) {
			const params = {
				id: row.id,
				status: val
			}
			this.$api
				.getCreditLevelConfUpdateStatus(params)
				.then((res) => {
					if (res.code === 200) {
						this.$message.success(this.$t('common.modify_success'))
						this.loadData()
					}
				})
				.catch((err) => {
					this.$message.error(err)
				})
		},
		edit(val) {
			this.title = val.payName
			this.dialogForm = {
				id: val.id,
				sort: val.sort,
				creditLevel: val.creditLevel.split(',')
			}
			this.dialogFormVisible = true
		},
		subAddOrEdit() {
			const params = {
				...this.dialogForm
			}
			params.creditLevel = params.creditLevel.join()
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.$api
						.getCreditLevelConfUpdate(params)
						.then((res) => {
							if (res.code === 200) {
								this.$message.success(
									this.$t('common.modify_success')
								)
								this.dialogFormVisible = false
								this.loadData()
							}
						})
						.catch((err) => {
							this.$message.error(err)
						})
				}
			})
		},
		clear() {
			this.$refs.formSub.clearValidate()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding {
	.el-dialog__header {
		padding: 20px 20px 0;
	}
	.el-dialog__body {
		padding: 0;
		.contentBox,
		form {
			padding: 0 20px;
		}
	}
	.dialog-footer {
		text-align: center;
	}
}
</style>
